/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import '../mixins/hairline.less';
@import './vars.less';

@multi-select-prefix-cls: ~'@{css-prefix}mobile-multi-select';

.@{multi-select-prefix-cls} {
  background: var(--ti-mobile-multi-select-bg, #fff);
  width: 100%;
  border-radius: 0px 0px 16px 16px;

  &__header {
    display: flex;
    padding: 0 16px;
    flex-direction: row;
    justify-content: center;

    &__flexCenter {
      height: 48px;
      width: 100%;
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: space-between;
      background: var(--ti-mobile-multi-select-header-bg, #fff);
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.06) inset;
    }

    &__calc {
      position: absolute;
      opacity: 0;
      z-index: -999;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      pointer-events: none;
    }

    &__item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--ti-mobile-multi-select-header-item-height, 28px);
      background: var(--ti-mobile-multi-select-header-item-bg, rgba(0, 0, 0, 0.03));
      border-radius: 4px;
      margin-top: var(--ti-mobile-multi-select-header-item-margin-top, 10px);
      padding: 5px 8px;

      &:hover {
        svg {
          fill: var(--ti-mobile-base-color-brand-1, #4a79fe);
        }
      }
    }

    &__item:hover &__label {
      color: var(--ti-mobile-base-color-brand-1, #4a79fe);
    }

    &__label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      font-size: var(--ti-mobile-multi-select-header-label-font-size, 12px);
      color: var(--ti-mobile-multi-select-header-label-text-color, #595959);
      line-height: 18px;
    }

    &__icon {
      height: 12px;
      line-height: 12px;
      width: 12px;
      margin-top: 2px;
      margin-left: 4px;
      font-size: 0px;
      transform-origin: center center;
      transition: all linear 0.3s;

      svg {
        fill: var(--ti-mobile-multi-select-svg-fill-color, #c2c2c2);
        font-size: 12px;
        vertical-align: text-bottom;
      }
    }

    &__active {
      svg {
        fill: var(--ti-mobile-base-color-brand-1, #4a79fe);
      }

      color: var(--ti-mobile-base-color-brand-1, #4a79fe);
    }
  }

  &__content {
    height: var(--ti-mobile-multi-select-content-height, 226px);
  }

  .noFooter {
    border-radius: 0px 0px 16px 16px;
  }

  &__footer {
    height: 74px;
    padding: 16px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px 0px 16px 16px;
    box-shadow: 0px -1px 3px 0px #f8f8f8;

    button {
      width: var(--ti-mobile-multi-select-footer-width, 164px);
    }

    :first-child {
      margin-right: 15px;
    }

    .tiny-mobile-button--primary {
      color: var(--ti-mobile-button-color, #fff);
      border-color: var(--ti-mobile-base-color-brand-1, #4a79fe);
      background-color: var(--ti-mobile-base-color-brand-1, #4a79fe);
    }

    .tiny-mobile-button--default {
      color: #191919;
    }
  }
}
